<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.keywords" placeholder="关键字" style="width: 200px;" class="filter-item"
        @keyup.enter.native="handleFilter" />

      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="getList">搜索</el-button>
    </div>
    <el-table :key="tableKey" v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%;">
      <el-table-column label="ID" prop="id" sortable="custom" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="昵称" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.status == 0" style="color: green;">启用</span>
          <span v-else style="color: red;">禁用</span>
        </template>
      </el-table-column>
      <el-table-column label="手机号" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.phone }}</span>
        </template>
      </el-table-column>
      <el-table-column label="最高答案分" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.rank }}</span>
        </template>
      </el-table-column>
      <el-table-column label="申研值" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.exp_shen }}</span>
        </template>
      </el-table-column>
      <el-table-column label="面经值" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.exp_interview }}</span>
        </template>
      </el-table-column>
      <el-table-column label="申学研角色" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.role_shen ==0" style="color: #0000F0;">普通会员</span>
          <span v-if="scope.row.role_shen ==1" style="color: green;">申达人</span>
          <span v-if="scope.row.role_shen ==2" style="color: chocolate;">申论讲师</span>
          <span v-if="scope.row.role_shen ==3" style="color: red;">申论主讲</span>
        </template>
      </el-table-column>
      <el-table-column label="面试厅角色" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.role_interview ==0" style="color: #0000F0;">普通会员</span>
          <span v-if="scope.row.role_interview ==1" style="color: green;">面试队长</span>
          <span v-if="scope.row.role_interview ==2" style="color: chocolate;">面试讲师</span>
          <span v-if="scope.row.role_interview ==3" style="color: red;">面试主讲</span>
        </template>
      </el-table-column>
      <el-table-column label="课程评分" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.rank_shen }}</span>
        </template>
      </el-table-column>
      <el-table-column label="面试评分" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.rank_interview }}</span>
        </template>
      </el-table-column>
      <el-table-column label="实名认证" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.auth >0" style="color: green;">已认证</span>
          <span v-else style="color: red;">未认证</span>
        </template>
      </el-table-column>
      <el-table-column label="上级ID" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.pid }}</span>
        </template>
      </el-table-column>

      <el-table-column label="注册时间" align="center">
        <template slot-scope="{ row }">
          {{ _date(row.create_time) }}
        </template>
      </el-table-column>

      <el-table-column v-permission="['/members/membersStatus', '/members/subList', '/members/holdCoin']" label="操作"
        width="280" align="center">
        <template slot-scope="scope">
          <div>
            <span v-permission="['/members/membersStatus']">
              <el-button size="small" :class="[scope.row.status == 0 ? 'el-button--danger' : 'el-button--primary']"
                @click="getSetStatus(scope.row,0)">
                <span v-if="scope.row.status == 0">禁用</span>
                <span v-else>启用</span>
              </el-button>
            </span>
            <span v-permission="['/members/memberEdit']">
              <el-button size="small" type="primary" @click="showMemberEdit(scope.row)">编辑</el-button>
            </span>
            <span v-permission="['/members/subList']">
              <el-button size="small" type="primary" @click="front_sublist(scope.row)">下级</el-button>
            </span>
            <span v-permission="['/members/memberWalletList']">
              <el-button size="small" type="primary" @click="showWallet(scope.row)">钱包</el-button>
            </span>

          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

    <el-dialog title="我的下级会员" :visible.sync="subListVisible">
      <el-table :key="tableKey" v-loading="listLoading" :data="sublist" border fit highlight-current-row style="width: 100%;">
        <el-table-column label="ID" prop="id" sortable="custom" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="手机号" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.phone }}</span>
          </template>
        </el-table-column>
        <el-table-column label="昵称" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>

        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.status == 1">正常</span>
            <span v-else>禁用</span>
          </template>
        </el-table-column>
        <el-table-column label="注册时间" align="center">
          <template slot-scope="{ row }">
            {{ _date(row.create_time) }}
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="subtotal" :page.sync="sublistQuery.page" :limit.sync="sublistQuery.limit"
        @pagination="asyc_subList" />
    </el-dialog>

    <el-dialog title="用户详情" :visible.sync="showMemberEdit_">
      <el-form>
        <el-form-item label="会员id" label-width="100px">
          <el-input disabled v-model="showMemberItem.id" />
        </el-form-item>
        <el-form-item label="手机号" label-width="100px">
          <el-input disabled v-model="showMemberItem.phone" />
        </el-form-item>
        <el-form-item label="昵称" label-width="100px">
          <el-input v-model="showMemberItem.name" />
        </el-form-item>
        <el-form-item label="粉丝数量" label-width="100px">
          <el-input disabled v-model="showMemberItem.fans" />
        </el-form-item>
        <el-form-item label="关注人数" label-width="100px">
          <el-input disabled v-model="showMemberItem.follow" />
        </el-form-item>
        <el-form-item label="面经值" label-width="100px">
          <el-input v-model="showMemberItem.exp_interview" />
        </el-form-item>
        <el-form-item label="申研值" label-width="100px">
          <el-input v-model="showMemberItem.exp_shen" />
        </el-form-item>
        <el-form-item label="mvp次数" label-width="100px">
          <el-input v-model="showMemberItem.exp_mvp" />
        </el-form-item>
        <el-form-item label="最高分" label-width="100px">
          <el-input v-model="showMemberItem.rank" />
        </el-form-item>
        <el-form-item label="带队集合室次数" label-width="100px">
          <el-input disabled v-model="showMemberItem.number_interview" />
        </el-form-item>
        <el-form-item label="自我介绍" label-width="100px">
          <el-input v-model="showMemberItem.describe" />
        </el-form-item>
        <el-form-item label="申课程评分" label-width="100px">
          <el-input disabled v-model="showMemberItem.rank_shen" />
        </el-form-item>
        <el-form-item label="面试厅好评率" label-width="100px">
          <el-input disabled v-model="showMemberItem.rank_interview" />
        </el-form-item>
        <el-form-item label="上级id" label-width="100px">
          <el-input disabled v-model="showMemberItem.pid" />
        </el-form-item>
        <el-form-item label="申学研权限" label-width="100px">
          <el-select v-model="showMemberItem.role_shen" placeholder="申学研权限提升" clearable style="width: 150px" class="filter-item">
            <el-option label="普通会员" :value="0" />
            <el-option label="申达人" :value="1" />
            <el-option label="申论讲师" :value="2" />
            <el-option label="申论主讲" :value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="申学研权限" label-width="100px">
          <el-select v-model="showMemberItem.role_interview" placeholder="面试场权限提升" clearable style="width: 150px" class="filter-item">
            <el-option label="普通会员" :value="0" />
            <el-option label="面试队长" :value="1" />
            <el-option label="面试讲师" :value="2" />
            <el-option label="面试主讲" :value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="实名认证" label-width="100px">
          <el-select v-model="showMemberItem.auth" placeholder="实名认证" clearable style="width: 150px" class="filter-item">
            <el-option label="未认证" :value="0" />
            <el-option label="已认证" :value="1" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="handleMemberEdit">修改用户信息</el-button>
      </div>
    </el-dialog>


    <el-dialog title="用户钱包" :visible.sync="showWallet_show">
      <el-form>
        <el-form-item label="余额" label-width="70px">
          <el-input disabled v-model="wallet_list.money" />
        </el-form-item>
        <el-form-item label="收益额" label-width="70px">
          <el-input disabled v-model="wallet_list.profit" />
        </el-form-item>
        <el-form-item label="累计收益" label-width="70px">
          <el-input disabled v-model="wallet_list.cumulative_profit" />
        </el-form-item>
        <el-form-item label="累计充值" label-width="70px">
          <el-input disabled v-model="wallet_list.recharge" />
        </el-form-item>
        <el-form-item label="累计提现" label-width="70px">
          <el-input disabled v-model="wallet_list.withdrawal" />
        </el-form-item>
        <el-form-item label="财年收益" label-width="70px">
          <el-input disabled v-model="wallet_list.year_profit" />
        </el-form-item>
        <el-form-item label="累计管理费" label-width="70px">
          <el-input disabled v-model="wallet_list.manage_profit" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="showEdit(1)">修改用户余额</el-button>
        <el-button size="small" type="primary" @click="showEdit(2)">修改用户收益</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="showEditTile" :visible.sync="showEdit_">
      <el-form v-if="showEditType ==1">
        <el-form-item label="当前余额" label-width="140px">
          <el-input disabled v-model="wallet_list.money" />
        </el-form-item>
        <el-form-item label="修改余额数" label-width="140px">
          <el-input type="number" v-model="wallet_list.edit" />
        </el-form-item>
      </el-form>
      <el-form v-if="showEditType ==2">
        <el-form-item label="当前收益额" label-width="140px">
          <el-input disabled v-model="wallet_list.profit" />
        </el-form-item>
        <el-form-item label="修改收益数" label-width="140px">
          <el-input type="number" v-model="wallet_list.edit" />
        </el-form-item>
      </el-form>
      <el-alert title="请谨慎使用该功能,仔细核对财务数据" type="warning" center show-icon>
      </el-alert>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="handleEdit()">确定修改</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import {
    membersList,
    membersStatus,
    subList,
    memberWalletList,
    moneyEdit,
    profitEdit,
    memberEdit
  } from '@/api/members';

  import waves from '@/directive/waves';
  import {
    parseTime
  } from '@/utils';
  import Pagination from '@/components/Pagination';
  import permission from '@/directive/permission/index.js';
  import {
    dateHandle
  } from '@/api/dateHandle';

  export default {
    components: {
      Pagination
    },
    directives: {
      waves,
      permission
    },
    data() {
      return {
        tableKey: 0,
        list: null,
        total: 0,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 10,
        },
        subListVisible: false,
        mid: 0,
        sublist: null,
        subtotal: 0,
        sublistQuery: {
          page: 1,
          limit: 6
        },
        showWallet_show: false,
        wallet_list: {},

        showEdit_: false,
        showEditType: 1,
        showEditTile: '修改用户余额',

        showMemberEdit_: false,
        showMemberItem: {}
      };
    },
    created() {
      this.getList()
    },
    methods: {

      handleMemberEdit() {
        memberEdit(this.showMemberItem).then(res => {
          if (res.code == 20000) {
            this.$message({
              type: 'success',
              message: res.msg
            });
            this.showMemberEdit_ = false
            this.listLoading = false
          }
        })
      },
      showMemberEdit(item) {
        this.showMemberItem = item
        this.showMemberEdit_ = true
      },

      handleEdit() {
        let params = {
          'member_id': this.wallet_list.member_id,
          'money': this.wallet_list.edit
        }
        if (this.showEditType == 1) {
          moneyEdit(params).then(res => {
            if (res.code == 20000) {
              this.$message({
                type: 'success',
                message: res.msg
              });
              this.showEdit_ = false
              this.listLoading = false
              this.showWallet({
                id: params.member_id
              })
            }
          })
        } else {
          profitEdit(params).then(res => {
            if (res.code == 20000) {
              this.$message({
                type: 'success',
                message: res.msg
              });
              this.showEdit_ = false
              this.listLoading = false
              this.showWallet({
                id: params.member_id
              })
            }
          })
        }
      },
      showEdit(type) {
        this.showEdit_ = true
        this.showEditType = type
        this.showEditTile = type == 1 ? '修改用户余额' : '修改用户收益'
      },
      showWallet(item) {
        this.item = item;
        memberWalletList({
          id: item.id
        }).then(res => {
          this.wallet_list = res.data
        })
        this.showWallet_show = true;
      },
      _date(t) {
        return dateHandle('Y-m-d H:i:s', t);
      },
      getList() {
        this.listLoading = true;
        membersList(this.listQuery).then(res => {
          this.list = res.data.data
          this.total = res.data.total

          setTimeout(() => {
            this.listLoading = false
          }, 0.3 * 1000)
        });
      },
      getSetStatus(row, type) {
        this.listLoading = true;
        membersStatus({
          id: row.id,
          type: type
        }).then(res => {
          if (res.code == 20000) {
            this.$message({
              type: 'success',
              message: res.msg
            });
            this.getList()
            this.listLoading = false
          }
        });
      },

      // 我的下级
      front_sublist(row) {
        this.subListVisible = true
        this.mid = row.id
        this.asyc_subList(this.mid)
      },
      asyc_subList(mid) {
        this.listLoading = true
        this.sublistQuery.ParentId = this.mid
        subList(this.sublistQuery).then(res => {
          this.sublist = res.data.data
          this.subtotal = res.data.total
          if (res.code == 20000) {
            this.listLoading = false
          }
        });
      },

    }
  };
</script>
